<template>
	<view class="page cabinet">
		<!-- 商品分类 -->
		<view class="category-box">
			<view class="header">
				<u-tabs :list="tabList" :height="68" active-color="#FFFFFF" inactive-color="#C3C2C1" bg-color="#292C2D"
					bar-width="36" :bar-style="barStyle" bar-height="6" item-width="33%" :is-scroll="true"
					:current="current" @change="tabSelected"></u-tabs>
			</view>
			<view v-if="cateList.length>0" class="list">
				<template v-for="(goods, g) in cateList">
					<recover :goods="goods" :key="g" :current="current" :recovery="recovery"></recover>
				</template>
			</view>
			<view v-else class="empty-box">
				<u-empty mode="list"></u-empty>
			</view>
		</view>

		<!-- 相关操作 -->
		<view class="action-wrap" v-if="current == 0">
			<view class="blank-block"></view>
			<view class="action-box">
				<view class="other" v-if="recycle_switch==1">
					<text @click="handleGive(2)" class="button recycle">{{recovery}}折回收</text>
					<text @click="handleGive(1)" class="button send-out">立即赠送</text>
				</view>
				<view class="others" v-if="recycle_switch==0">
					<text @click="handleGive(1)" class="button send-out">立即赠送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				queryParams: {
					page: 1,
					limit: 10,
					state: 1
				},
				barStyle: {
					background: '#FFFFFF',
					borderRadius: '3rpx'
				},
				tabList: [],
				cateList: [],
				recovery: '',
				recycle_switch: 0
			}
		},
		onShow() {
			this.queryParams.page = 1
			this.getList()
			this.$net.req('/config/getBatchByKeys', {
				keys: ['active_recycling', 'recycle_switch']
			}).then(res => {
				this.recovery = res.data.active_recycling / 10
				this.recycle_switch = res.data.recycle_switch
				if (res.data.recycle_switch == 1) {
					this.tabList = [{
							name: '待处理'
						},
						{
							name: '已赠送'
						},
						{
							name: '已回收'
						},
					]
				} else if (res.data.recycle_switch == 0) {
					this.tabList = [{
							name: '待处理'
						},
						{
							name: '已赠送'
						}
					]
				}
			})
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			getList() {
				this.$net.req('/order/getlists', this.queryParams, false).then(res => {
					if (res.code == 200) {
						console.log(res)
						if (this.queryParams.page == 1) {
							this.cateList = res.data.list
						} else if (res.data.list.length > 0) {
							this.cateList = this.cateList.concat(res.data.list)
						}
						if (res.data.list.length > 0) {
							++this.queryParams.page
						}
					}
				})
			},
			viewPage(id) {
				uni.navigateTo({
					url: `/pages/index/query?id=${id}`
				})
			},
			handleGive(type) {
				uni.navigateTo({
					url: `/pages/cabinet/give?type=${type}`
				})
			},
			tabSelected(index) {
				this.queryParams.page = 1
				if (this.current !== index) {
					this.current = index
					this.queryParams.state = index + 1
					this.getList()
				}
			},

		},
	}
</script>

<style lang="scss">
	.page.cabinet {
		.category-box {
			width: 100%;
			border-radius: 20rpx;
			background: #292C2D;
			.header {
				width: 100%;
				background: #FFFFFF;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 10;

				&.search-result {
					line-height: 80rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 32rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #101010;
					}
				}

				.item {
					text-align: center;
					line-height: 80rpx;
					margin-right: 32rpx;

					.text {
						font-size: 32rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #101010;
					}

					&.active {

						.text {
							display: inline-block;
							color: #FF4023;
							font-weight: 600;
							border-bottom: 4rpx solid #FF4023;
						}
					}
				}
			}

			.list {
				width: 100%;
				padding: 30rpx 24rpx;
				margin-top: 80rpx;

				.item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 702rpx;
					// background: #F7BE5B; //藏品列表颜色
					background: linear-gradient(to left, transparent, transparent),
					      url("https://qiniu.wiod.cn/lingchi_guess_box/2/20220327/aaa00f04b6164cd89496a8af5e7f92f80f7125e9.png");
					background-size:350px 100px;
					border-radius: 20rpx;
					padding: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.info-box {
						width: 470rpx;

						.name {
							height: 40rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							margin-left: 10rpx;
							line-height: 40rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							// overflow: hidden;
							// text-overflow: ellipsis;
							// display: -webkit-box;
							// -webkit-line-clamp: 2;
							// -webkit-box-orient: vertical;
						}

						.date-time {
							height: 32rpx;
							font-size: 24rpx;
							color: #C3C2C1;
							line-height: 32rpx;
							margin-top: 16rpx;
						}

						.tips-box {
							margin-top: 16rpx;

							.tips {
								display: inline-block;
								height: 40rpx;
								line-height: 40rpx;
								font-size: 20rpx;
								color: #F69D56;
								background: rgba(246, 157, 86, 0.16);
								border-radius: 8rpx;
								padding: 0 12rpx;
							}

						}


					}
				}

				.price {
					height: 40rpx;
					line-height: 40rpx;
					text-align: right;

					.label {
						font-size: 24rpx;
						color: #C3C2C1;
						margin-right: 10rpx;

						&.blind {
							color: #DFC791;
							margin-left: 20rpx;
						}
					}

					.unit {
						color: #2E2B2B;
						font-size: 24rpx;
						margin-right: 6rpx;

						&.blind {
							color: #DFC791;
						}
					}

					.money {
						font-weight: bold;
						color: #2E2B2B;
						font-size: 32rpx;

						&.blind {
							color: #DFC791;
						}
					}
				}

				.btn-box {
					text-align: right;
					margin-top: 32rpx;
					padding: 0 20rpx;

					.button {
						display: inline-block;
						width: 160rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						font-size: 28rpx;
						color: #2F2E3B;
						background: #DFC791;
						border-radius: 8rpx;
					}
				}
			}

			.empty-box {
				min-height: 60vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #292C2D;
			}
		}

		.action-wrap {
			.blank-block {
				width: 100%;
				height: 125rpx;
				background: #292C2D;
			}

			.action-box {
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
				background: #E7E7EB;
				border-radius: 32rpx 32rpx 0 0;
				box-shadow: 0 0 6rpx rgba($color: #000000, $alpha: 0.16);
				padding: 0;

				.give {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					height: 112rpx;
					padding: 32rpx;

					.label {
						height: 48rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #101010;
						line-height: 48rpx;
					}

					.button {
						width: 120rpx;
						line-height: 48rpx;
						text-align: center;
						font-size: 24rpx;
						color: #6A6976;
						border-radius: 8rpx;
						border: 2rpx solid #6A6976;
					}
				}

				.others {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 145rpx;
					background: #FFFFFF;
					border-radius: 32rpx 32rpx 0 0;
					padding: 24rpx;

					.button {
						width: 100%;
						line-height: 80rpx;
						text-align: center;
						font-weight: bold;
						background: #FFFFFF;
						border-radius: 16rpx;

						// &.recycle {
						// 	font-size: 32rpx;
						// 	color: #2F2E3B;
						// 	border: 3rpx solid #2F2E3B;
						// }
						&.send-out {
							font-size: 32rpx;
							color: #2F2E3B;
							background: #DFC791;
						}
					}
				}

				.other {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 145rpx;
					background: #FFFFFF;
					border-radius: 32rpx 32rpx 0 0;
					padding: 24rpx;

					.button {
						width: 340rpx;
						line-height: 80rpx;
						text-align: center;
						font-weight: bold;
						background: #FFFFFF;
						border-radius: 16rpx;

						&.recycle {
							font-size: 32rpx;
							color: #2F2E3B;
							border: 3rpx solid #2F2E3B;
						}

						&.send-out {
							font-size: 32rpx;
							color: #2F2E3B;
							background: #DFC791;
						}
					}
				}
			}
		}

	}
</style>
